<template>
  <div>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 路由管理</el-breadcrumb-item>
        <el-breadcrumb-item>代收通道管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :inline="true" :model="formData" ref="formData" class="demo-form-inline">
      <el-form-item label="通道别名" prop="channelCode">
        <el-input v-model="formData.channelCode" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="通道类型" prop="tradeType">
        <el-select v-model="formData.tradeType" placeholder="">
          <el-option label="全部"  value=""></el-option>
          <el-option :label="item" :value="index" v-show="index==1" v-for="(item, index, key) in tradeTypeItems" :key="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通道状态" prop="status">
        <el-select v-model="formData.status" placeholder="">
          <el-option label="全部" value=""></el-option>
          <el-option :label="item" :value="index" v-show="index!=0" v-for="(item, index, key) in statusItems" :key="key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTimeStr">
        <el-date-picker v-model="formData.createTimeStr" type="datetime" format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
      </el-form-item>
      <el-form-item label="-" prop="updateTimeStr">
        <el-date-picker v-model="formData.updateTimeStr" type="datetime" format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetForm('formData')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border height="500" style="width: 100%" ref="multipleTable">
      <el-table-column type="index" width="70" center="true"></el-table-column>
      <el-table-column prop="channelCode" label="通道别名" min-width="170" center="true"></el-table-column>
      <el-table-column prop="channelName" label="通道中文名称" min-width="170" center="true"></el-table-column>
      <el-table-column prop="tradeTypeStr" label="通道类型" min-width="170" center="true"></el-table-column>
      <el-table-column prop="authenticationStr" label="是否必须鉴权" min-width="170" center="true"></el-table-column>
      <el-table-column prop="statusStr" label="状态" min-width="170" center="true"></el-table-column>
      <el-table-column prop="priority" label="优先级" min-width="170" center="true"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="200" center="true"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" min-width="200" center="true"></el-table-column>
      <el-table-column fixed="right" label="操作" min-width="265">
        <template slot-scope="scope">
          <el-tooltip :enterable="false" content="编辑" placement="top">
            <el-button type="primary" icon="edit" size="small" :disabled="scope.row.status === 1" @click="handleEdit(scope.$index, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip :enterable="false" content="启用" placement="top">
            <el-button type="primary" size="small" :disabled="scope.row.status === 1" @click="enableFn(scope.$index, scope.row, 0)"><i class="el-icon-caret-right"></i></el-button>
          </el-tooltip>
          <el-tooltip :enterable="false" content="停用" placement="top">
            <el-button type="primary" size="small" :disabled="scope.row.status === 2" @click="enableFn(scope.$index, scope.row, 1)"><i class="el-icon-circle-close"></i></el-button>
          </el-tooltip>
          <el-tooltip :enterable="false" content="查看支持的银行" placement="top">
            <el-button type="primary" size="small" @click="lookSupportBankCard(scope.$index, scope.row)"><i class="el-icon-view"></i></el-button>
          </el-tooltip>
          <el-tooltip :enterable="false" content="编辑通道限制条件" placement="top">
            <el-button type="primary" size="small" @click="channelRestrictionEdit(scope.$index, scope.row)"><i class="el-icon-document"></i></el-button>
           </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>

  <!--编辑通道-->
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible1">
    <chanel-edit  :form="form" @chanelClose='chanelClose' ></chanel-edit>
  </el-dialog>

  <!--查看支持银行卡列表-->
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible2">
    <supportedBank-edit :supportedBankForm="supportedBankForm" :rmd="rmd" @chanelClose='chanelClose' ></supportedBank-edit>
  </el-dialog>

  <!--编辑通道限制条件-->
  <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible3" size="large">
    <channel-restriction-edit :channelFormData="channelFormData" :rmd="rmd" @chanelClose='chanelClose' ></channel-restriction-edit>
  </el-dialog>
  </div>
</template>

<script>
import { queryChannel, updateChannel } from '@/services/getData'
import chanelEdit from '@/page/collection-channel-management/CollectionChannelManagement-child/chanelEdit'
import supportedBankEdit from '@/page/collection-channel-management/CollectionChannelManagement-child/spourtBankList'
import channelRestrictionEdit from '@/page/collection-channel-management/CollectionChannelManagement-child/channelRestrictionEdit'
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1,
      totalCount: null,
      pagesize: 10,
      is_search: false,
      tradeTypeItems: {},
      statusItems:{},
      selected:true,
      formData: {
        tradeType:'',
        status:'',
        channelCode: '',
        createTimeStr: '',
        updateTimeStr: ''
      },
      dialogFormVisible1:false,
      dialogFormVisible2:false,
      dialogFormVisible3:false,
      form: {},
      supportedBankForm: {},
      channelFormData: {},
      dialogTitle: '',
      rmd: null // 时间戳 更新dialog的数据
    }
  },
  components: {
    chanelEdit,
    supportedBankEdit,
    channelRestrictionEdit
  },
  created() {
    this.initData()
    this.tradeTypeItems = this.GLOBAL.getChanelType()
    this.statusItems = this.GLOBAL.getChanelStatus()
  },

  methods: {
    search() {
      this.is_search = true
      let formDataStr = this.GLOBAL.ObjectCopy(this.formData)
      formDataStr["createTimeFrom"] = this.formData["createTimeStr"] ? this.$moment(this.formData["createTimeStr"]).format('YYYYMMDD HH:mm:ss') : ''
      formDataStr["createTimeTo"] = this.formData["updateTimeStr"] ? this.$moment(this.formData["updateTimeStr"]).format('YYYYMMDD HH:mm:ss') : ''
      delete formDataStr["createTimeStr"]
      delete formDataStr["updateTimeStr"]
      this.loadData(formDataStr)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.search()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.search()
    },

    // 启用、停用方法
    enableFn(i, v, s) {
      // 判断你是否可以点击
      if (v.status == 1 && s == 0 ) {
        this.$message({
          type: 'error',
          message: "您的通道已启用,请选择停用功能"
        })
        return false
      } else if (v.status == 2 && s == 1 ) {
        this.$message({
          type: 'error',
          message: "您的通道已停用,请选择启用功能"
        })
        return false
      }
      let $messageDesc = s == 0 ? "启用" : "停用"
      let params = {}
      params["channelCode"] = v.channelCode
      params["tradeType"] = v.tradeType
      params["status"] = s == 0 ? 1 : 2
      params["priority"] = v.priority
      params["operatorName"] = sessionStorage.getItem('ms_username')
      params["operatedMenu"] = "代收通道管理"
      params["operatedButton"] = $messageDesc

      this.$confirm('您确认要'+ $messageDesc +"通道吗？", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateChannel(params).then(
          res => {
            if (res.resultCode == 1) {
              this.$message({
                type: 'success',
                message: $messageDesc+"成功"
              });
              this.search()
            } else {
              this.$message({
                type: 'error',
                message: res.errorDesc
              });
            }
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    // 编辑方法
    handleEdit(i, v) {
      this.dialogTitle = '代收付通道编辑'
      this.dialogFormVisible1 = true
      this.dialogFormVisible2 = this.dialogFormVisible3 = false
      this.form = v
    },

    // 查看支持银行卡
    lookSupportBankCard(i, v) {
      this.dialogTitle = '查看支持银行卡列表'
      this.dialogFormVisible1 = this.dialogFormVisible3 =false
      this.dialogFormVisible2=true
      this.supportedBankForm = v
      this.rmd = new Date().getTime()
    },

    // 编辑通道限制条件
    channelRestrictionEdit(i, v) {
      this.dialogTitle = '编辑通道限制条件'
      this.dialogFormVisible1 = this.dialogFormVisible2 =false
      this.dialogFormVisible3 = true
      this.channelFormData = v
      this.rmd = new Date().getTime()
    },

    // 关闭弹框同一方法
    chanelClose(v, k){
      // 判断按钮是从什么页面点击的  1：编辑通道  2：查看银行卡列表  3：编辑通道限制条件
      v === 1 ? this.dialogFormVisible1 = !this.dialogFormVisible1: ''
      v === 2 ? this.dialogFormVisible2 = !this.dialogFormVisible2: ''
      v === 3 ? this.dialogFormVisible3 = !this.dialogFormVisible3: ''
//    this.channelFormData = {}
      if(!k) {
        this.initData()
      }

    },

    // 初始化数据
    async initData() {
      try {
        this.loadData()
      } catch (err) {
        console.log('获取数据失败', err)
      }
    },

    // 加载表格
    async loadData(v) {
      try {
        let params = {
          page: this.currentPage,
          rows: this.pagesize,
          operatorName: sessionStorage.getItem('ms_username'),
          operatedMenu: "代收通道管理",
          operatedButton: "查询"

        }
        let obj = Object.assign(params, v)
        const res = await queryChannel(obj)
        if (res.resultCode == 1) {
          res.rows.forEach(item => {
            item.tradeTypeStr = this.GLOBAL.getChanelType(item.tradeType),
            item.authenticationStr = this.GLOBAL.yesOrno(item.authentication), // 0:是  1:否
            item.statusStr = this.GLOBAL.getStatus(item.status-1) // 0:启用  1:停用
          })
          this.tableData = res.rows
          this.totalCount = res.total
        } else {
          this.$message({
            type: 'error',
            message: res.errorDesc
          });
          throw new Error(res.message)
        }
      } catch (err) {
        console.log('获取数据失败', err)
      }
    }
  }
}
</script>
